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Printed Page and Reflected Light 


A printed page is viewed in reflected light. 


Monitor and Internal Light Source 


Any design on a computer monitor is seen with an internal light 
source. 
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Introduction 


The aim of this short course is to introduce students to some of the basic concepts in using typefaces for Web 
based designs. The language and structure of this course has been kept lucid and simple, keeping in mind under- 
graduate students of art and design. 


We must begin by understanding how Web based designs are different than traditional print based designs. The 
first and most basic difference regarding these is the certainty of output. 


In traditional print based designs, since the final output is a physical copy produced by a printer, there is a great 
deal of certainty about how the final design would look, and how it will be consumed. In contrast to this, one 
cannot say with certainty how your website will be viewed. Once it is designed it is uploaded on to a web server, 
from which it can be viewed on a desktop computer, which has a large and wide LCD monitor or on a small laptop 
which has a small LCD screen, or even on a mobile phone which has an ever smaller screen. From a system point 
of view, the design created by you would be processed by several different operating systems. Typographical- 

ly these systems might not contain the fonts that you have used for your designs—this brings about a certain 
amount of uncertainty in the final rendering of your designs. 


In traditional print based designs, since the final output is a physical copy produced by a printer, there is a great 
deal of certainty about how the final design would look, and how it will be consumed. In contrast to this, one 
cannot say with certainty how your website will be viewed. Once it is designed it is uploaded on to a web server, 
from which it can be viewed on a desktop computer, which has a large and wide LCD monitor or on a small laptop 
which has a small LCD screen, or even on a mobile phone which has an ever smaller screen. From a system point 
of view, the design created by you would be processed by several different operating systems. Typographical- 

ly these systems might not contain the fonts that you have used for your designs—this brings about a certain 
amount of uncertainty in the final rendering of your designs. 


Figure 1: Simplified process for traditional print based designs. 
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Figure 2: Uncertainty in the output of web based designs. 


_ 
— 


4 


Figure 3: The uncertainty rises from the fact that any given website can be seen on different devices. 


Assignment 1: 

¢ In the given assignment, please try and answer the following questions. 

* Use the available books in your library, online sources or talk to experienced graphic/ type designers. 

¢ After noting down the answers, please discuss your answers with your colleagues and faculty members. 
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There is a possibility that you might not reach a single unambiguous answer. The goal of the assignment is to 
stimulate a discussion rather than to come up with a definite answer. Some of the questions are purposefully 
challenging, complex and ambiguous in nature; they are meant for the more experienced students and faculty, 
but undergraduates should nonetheless attempt to answer them. 


Q1. List down various mediums that are incorporated in traditional print based publications. 
Describe their properties—such as size, number of colours, fonts, layouts etc. 


Q2. List down various mediums that web based designs need to be prepared for. 
Describe their properties—such as size, number of colours, fonts, layouts etc. 
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Light Sources 


In the earlier section we saw how we can be certain about the output of our designs in traditional print medi- 
ums. The same cannot be said about web based designs, as the device on which the design will be viewed is not 
known. Along with this there are certain basic differences in the approaches to designing for print and for the 
web. One of the first differences that we come across is that of light sources. 


Design elements on a printed page, be it text or graphics are seen in reflected light. Their visibility is dependent 
on an external source of light. The rays of light are emitted from an external light source such as the sun; they 
then are reflected back opaque page and are then seen by the viewer. (See figure 1) 


External Light Source 


Opaque Page 


Figure 1: A printed page is viewed in reflected light. 


Web (software) based designs use a completely different principle to display text and graphics. When a design is 
seen on a computer monitor or a mobile device, the graphic elements in the design are illuminated by an internal 
light source which is present in the device itself. Graphical elements on a monitor are illuminated and displayed 
directly. 
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Internal Light Source 


Transparent Screen 


Figure 2: Any text on a monitor is read with an internal light source. 


This difference in the light sources has many consequences on how graphical elements and text are perceived by 
the viewer. So a graphic designer must be aware of how a design would look on screen and how it would look on 
paper. Designers must be aware of the advantages and disadvantages of each of the mediums, and be careful 
while translating their designs from paper to screen and vice versa. 


For Example: 

Colour is perceived differently on paper and on screen due to the differences in light sources. Most colours usual- 
ly look brighter on the screen; this can be an advantage as more vibrant colours can then be used on screen. But 
designers must be careful while using light colours, especially in setting text. Light colours on screen have lower 
contrast. So a line of yellow coloured text on a white background might be very difficult to read on screen. Along 
the same lines colours such as gold, silver, as well as a range of fluorescent colours are available exclusively for 
print and cannot be created on screen. 


Assignment 2: 

In the given assignment, please try and answer the following questions. 

* Use the available books in your library, online sources or talk to experienced graphic/ type designers. 
After noting down the answers, please discuss your answers with your colleagues and faculty members. 


There is a possibility that you might not reach a single unambiguous answer. The goal of the assignment is to 
stimulate a discussion rather than to come up with a definite answer. Some of the questions are purposefully 
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challenging, complex and ambiguous in nature; they are meant for the more experienced students and faculty, 
but undergraduates should nonetheless attempt to answer them. 


Q3. Describe in your own words how the source of light affects the text that is read. Determine what effect does 
light have on the basic elements of design, such as colour, typography, layout etc. 


Q4. Read up and search “e-ink technologies” and e-book readers. Discover the source of light that they use, and 
hence determine its advantages and disadvantages. 


Q5. Compare print based design with screen based designs and e-ink technology. Highlight their pros and cons. 
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eesien Course Screen Types 

Digital Typography - 2 

Understanding Type as Bits Electronic devices mostly convey (display) information through the use of a display device. These display devices 

by make use of certain display technologies such as LED (segmented) display, LCD, CRT displays etc. Each of these 

Prof. Girish Dalvi has a ‘display resolution’ which is the maximum number of distinct pixels (picture elements) that the device can 

IDC, IIT Bombay display. A Pixel is the smallest screen element in a display. While representing raster images it is the smallest unit 
of a picture. 


Raster images (such as photographs) are made up of millions of pixels, each having a specific colour and location. 
An important parameter that defines the pixel is its aspect ratio, which is the ratio of the width of the pixel to its 
height. It is important to note here that a pixel is not always a square (ratio 1:1); there are many rectangular pixels 


which have different ratios, such as 4:3 and 16:9. 
Source: 


https://www.dsource.in/course/digital- 


Furthermore, it is also possible that pixels are not rectangular in nature. They can be circular and even capsule 
typography-2/screen-types 


shaped. On a computer each pixel is a rectangle, but when displayed on a device they can be displayed through a 
series of circles, rectangles or capsules. 


Figure 1: Pixels on a TV set, on a CRT Computer Monitor and LCD Monitor. 
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The above figure shows the different shapes of pixels that are seen in some common display devices. 


Figure 2: Pixels on a Cathode Ray Tube Computer Monitor and the text displayed in it. 
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3. Screen Types 


Figure 3: Pixels on a LCD Computer Monitor and the text displayed in it. 


When text is fitted on to a grid of pixels, it might appear jagged. The jagged edges are called artifacts or the 


text is called aliased text (or edge). Smoothening these artifacts or removing aliasing from a text to make it look 


smoother and to make it blend properly with its background is called anti-aliasing. 
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Figure 4: Aliased letter (on the left) and anti-aliased letter (on the right). 


Assignment 3: 
¢ In the given assignment, please try and answer the following questions. 
¢ Use the available books in your library, online sources or talk to experienced graphic/ type designers. 
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Design Course + After noting down the answers, please discuss your answers with your colleagues and faculty members. 
Digital Typogra phy “2 There is a possibility that you might not reach a single unambiguous answer. The goal of the assignment is to 
Understanding Type as Bits 


stimulate a discussion rather than to come up with a definite answer. Some of the questions are purposefully 


by = : challenging, complex and ambiguous in nature; they are meant for the more experienced students and faculty, 
Prof. Girish Dalvi but undergraduates should nonetheless attempt to answer them. 
IDC, IIT Bombay 
Q6. List down the various aspect ratios of pixels used today? 
What are the different resolutions that are used in today’s devices? 
Q7. What are the different shapes of pixels? 
Why do different devices, have pixels of different shapes and sizes? 
Source: 
https://www.dsource.in/course/digital- Q8. What are the methods used for smoothening fonts? 
typography-2/screen-types Find out and explain, “SubpixelRendering Optimization” technology. 
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Understanding Type as Bits The square grid of the screen presents a new kind of challenge to font designers. Type designers have had to de- 
by sign letters which fit into the pixel grid presented by various electronic devices. Screen fonts are fonts which are 
Prof. Girish Dalvi specially designed considering the limitations of a pixel grid. Their intended use is for display on digital devices. 
IDC, IIT Bombay In some low end devices such as mobiles, bitmap fonts are used instead of vector fonts. 


Common examples given for fonts that are designed for the screen are: 
* Verdana and 
° Georgia 
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Figure 1: Verdana is a sans serif font designed by Matthew Carter. 


Gill Sans is a sans serif 
font which is used in 
print publications. 


Figure 2: Gill Sans is a font which was designed by Eric Gill before the use of DTP computers. 
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Georgia x-height Centaur x-height 


Figure 3: Compare x-heights of the fonts, both the fonts are at the same point size. 


A x-height A x-height 


Figure 4: Compare x-heights of the fonts, both the fonts are at the same point size. 


In the above figures we have shown fonts which are largely used for print and fonts which are specially designed 
for the screen. Compare the visual features of these two typefaces, and try and deduce what design features dif- 
ferentiate the two kinds of fonts. As a hint we could begin by comparing the horizontal and vertical proportions 

(such as x-heights) of the two kinds of fonts. 


Illusion III | Illiterate 


Illusion Ill 1 Illiterate 


Figure 5: Note differences in characters such as lowercase | and upper case | and the numeral 1. 


If we study Verdana, we realize that its legibility at small point sizes can be attributed to many factors. Its basic 

shape is derived from a square grid. Along with this it is more loosely spaced which helps legibility at small sizes. 
The bold version of the font is also darker than print based fonts. Letters such as j I |, | and 1 have been designed 
so that they can be easily differentiated. 


Besides the visual features, screen fonts are hinted. Font hinting is the process in type design where set of 
instructions are embedded in a font so that the computer can adjust the drawing outlines on a small raster grid. 
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is 


Hinting is especially used to make fonts more legible on low screen resolutions. One important factor for the 
clear legibility of screen fonts is the quality of hinting that they have. 


Assignment 4: 

In the given assignment, please try and answer the following questions. 

* Use the available books in your library, online sources or talk to experienced graphic/ type designers. 

+ After noting down the answers, please discuss your answers with your colleagues and faculty members. 


There is a possibility that you might not reach a single unambiguous answer. The goal of the assignment is to 
stimulate a discussion rather than to come up with a definite answer. Some of the questions are purposefully 
challenging, complex and ambiguous in nature; they are meant for the more experienced students and faculty, 
but undergraduates should nonetheless attempt to answer them. 


Q9. List out the visual design features in screen fonts such as Verdana and Georgia that make them more legible 
on the screen as compared to print fonts. 


Q10. Verdana and Georgia were fonts designed for the screen in the 90’s. Find out and list down fonts designed 
for the screen in recent years. 


Q11. Explain the phenomena of hinting. What is its purpose? How is hinting actually done? 
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The uncertainty rises from the fact that any given website can be 
seen on different devices 


Website seen on different devices 
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The uncertainty rises from the fact that any given website can be 
seen on different devices 
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Pixels are not necessarily the same shape 


17" PCCRT Typkal Colour LCD. 


21" TVCRT 


Pixels on a TV set, on a CRT Computer Monitor and LCD Monitor. 


PC LCD (Liquid Crystal Display) Monitor 


hats cate rar 
LiL LLILiL Lie eink 
"LLILIL TL LiL EI LIR IR IBieL 


Pixels on a LCD Computer Monitor and the text displayed in it. 


PC CRT (Cathode Ray Tube) monitor 


Pixels and Text on a CRT Computer Monitor 


Aliased letter and anti-aliased letter 


D A 


HD A 


Aliased letter (on the left) and anti-aliased letter (on the right). 
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Georgia x-height Centaur x-height 


Verdana x-height Gill x-height 


Compare design features of fonts 
designed for the screen, all the fonts 
are presented in the same point size. 


_ é 


Georgia is a serif 
font designed by 
Matthew Carter. It 
was also designed 
for screen usage. 


| Illiterate Illusion 
1 Illiterate Illusion 


Compare design features of fonts 
designed for the screen, both fonts 
are presented in the same point size. 
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Links: 


Links: 
+ Useful resource e-links related to ‘Graphic Design in India - includes Communication Design, Publication Design 
and Packaging Design 


* International resource related to ‘Graphic Design’ 


¢ Visual Communication Design at IDC IIT Bombay 
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Contact Details 


This documentation for the course was done by Girish Dalvi, Ph.D. Student at IDC, IIT Bombay. 
You can get in touch with him, at girish.dalvi[at]gmail.com 
You can write to the following address regarding suggestions and clarifications: 


Helpdesk Details: 
Co-ordinator 

Project e-kalpa 
Industrial Design Centre 
IIT Bombay 

Powai 

Mumbai 4000 076 

India 


Phone: 091-22-2159 6805/ 091-22-2576 7802 
Email: dsource.in[at]gmail.com 


20 


